<div class="content-section introduction">
    <div>
        <span class="feature-title">Theming</span>
        <span>Choose from a variety of premium themes or develop your own theme using PrimeNG Theme Designer API.</span>
    </div>
</div>

<div class="content-section documentation">
    <h3 style="margin-top:0">Theme Designer API</h3>
    <p><a href="https://www.primefaces.org/designer/primeng">Designer API</a> is the ultimate tool to create your own PrimeNG experience powered by a SASS based theme engine 
        with 500+ variables and a demo application. In addition, PrimeNG only ships the generated CSS of Nova, Luna and Rhea themes whereas Designer provides
        full access to the whole SASS structure and the variables of these pre-built themes.</p>
    <p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>
    
    <p>Visit <a href="https://www.primefaces.org/designer/primeng">Designer API HomePage</a> for more information, live demos and access to a trial version.</p>
    <a href="http://www.primefaces.org/designer/primeng">
        <img alt="Why You Should PrimeNG" src="assets/showcase/images/primeng-designer.jpg" style="width:100%">
    </a>

    <h3>Premium Templates</h3>
    <p>Powered by Angular CLI, create awesome applications in no time using the premium templates of PrimeNG and impress your users.</p>
    <p>Premium Templates are advanced Angular CLI applications featuring a full application layout with various menu orientations, templates pages such as landing, login and 
        premium themes that share the same design language of the layout for a unified look.</p>
    <div class="templates">
        <div class="ui-g">
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/babylon-ng">
                    <img alt="Babylon" src="assets/showcase/images/layouts/babylon-ng.jpg">
                </a>
            </div>
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/olympia-ng">
                    <img alt="Olympia" src="assets/showcase/images/layouts/olympia-ng.jpg">
                </a>
            </div>
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/california-ng">
                    <img alt="California" src="assets/showcase/images/layouts/california-ng.jpg">
                </a>
            </div>
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/ecuador-ng">
                    <img alt="Ecuador" src="assets/showcase/images/layouts/ecuador-ng.jpg">
                </a>
            </div>
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/harmony-ng">
                    <img alt="Harmony" src="assets/showcase/images/layouts/harmony-ng.jpg">
                </a>
            </div>
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/apollo-ng">
                    <img alt="Apollo" src="assets/showcase/images/layouts/apollo-ng.jpg">
                </a>
            </div>
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/serenity-ng">
                    <img alt="Serenity" src="assets/showcase/images/layouts/serenity-ng.jpg">
                </a>
            </div>
            <div class="ui-g-6">
                <a href="https://www.primefaces.org/layouts/avalon-ng">
                    <img alt="Avalon" src="assets/showcase/images/layouts/avalon-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/verona-ng">
                    <img alt="Verona" src="assets/showcase/images/layouts/verona-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/manhattan-ng">
                    <img alt="Manhattan" src="assets/showcase/images/layouts/manhattan-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/paradise-ng">
                    <img alt="Paradise" src="assets/showcase/images/layouts/paradise-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/ultima-ng">
                    <img alt="Ultima" src="assets/showcase/images/layouts/ultima-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/barcelona-ng">
                    <img alt="Barcelona" src="assets/showcase/images/layouts/barcelona-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/morpheus-ng">
                    <img alt="Morpheus" src="assets/showcase/images/layouts/morpheus-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/atlantis-ng">
                    <img alt="Atlantis" src="assets/showcase/images/layouts/atlantis-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/poseidon-ng">
                    <img alt="Poseidon" src="assets/showcase/images/layouts/poseidon-ng.jpg">
                </a>
            </div>
            <div class="ui-g-12 ui-md-4">
                <a href="https://www.primefaces.org/layouts/omega-ng">
                    <img alt="Omega" src="assets/showcase/images/layouts/omega-ng.jpg">
                </a>
            </div>
        </div>
    </div>
</div>